<template>
    <div class="home">
        <div style="position:fixed;top:0;z-index: 300;">
            <!--顶部搜索-->
            <div style="display: flex;background-color: #fa3534;padding: .4rem 1rem;">
                <router-link to="/homeSearch" style="width:100%;">
                    <el-input
                            placeholder="请输入关键字"
                            prefix-icon="el-icon-search"
                            v-model="value" style="width:100%;" @click="searchM">
                    </el-input>
                </router-link>
                <router-link to="/mine">
                    <van-icon name="contact" color="#ffffff" style="line-height:1.7rem;margin-left: .5rem;"/>
                </router-link>
            </div>
            <!--大分类-->
            <van-skeleton title :loading="loading">
                <van-tabs color="#fff" background="#fa3534" @click="homes">
                    <van-tab title="首页" color="#ffffff">
                        <!--<router-view></router-view>-->
                    </van-tab>
                    <van-tab v-for="(v,i) in typ" :title="v.name">
                    </van-tab>
                </van-tabs>
            </van-skeleton>
        </div>
        <!--中部组件-->
        <router-view></router-view>
        <!--底部导航-->
        <van-tabbar v-model="active" active-color="#ee0a24">
            <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o" @click="goTyp">分类</van-tabbar-item>
            <van-tabbar-item icon="cart-o" @click="goCart">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o" @click="goMine">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import jsp from '../../Api/Api'

    export default {
        name: "Home",
        data() {
            return {
                typ: [],
                loading: true,
                active: 0,
                value: '',
                type: ['sm', 'foods', 'mkp', 'child', 'ktcn', 'bags', 'care', 'clg'],
            }
        },
        created() {
            //轮播图上方分类
            jsp.getToptype().then(data => {
                // console.log(data.data)
                this.typ = data.data
            }).catch(error => console.log(error))

        },
        mounted() {
            this.loading = false;
        },
        methods: {
            homes(v, id) {
                console.log(v, id)
                if (v == 0) {
                    this.$router.push('/home/homes')
                } else {
                    this.typ.forEach(v => {
                        if (v.name == id) {
                            // console.log(v.category_id)
                            localStorage.setItem('id', v.category_id)
                        }
                    })
                    this.$router.push({path: `/home/${this.type[v - 1]}`})
                }
            },
            searchM() {
                console.log(13213)
                this.$router.push('/homeSearch')
            },
            goTyp() {
                this.$router.push('/classify')
            },
            goMine() {
                this.$router.push('/mine')
            },
            goCart(){
                this.$router.push('/cart')
            }
        },

    }
</script>

<style scoped>


    >>> .van-cell::after {
        border: 1px solid #ebedf0;;
    }

    >>> .el-input__inner {
        border-radius: 20px;
    }

    >>> .van-tab {
        color: #ffffff;
    }

    /*>>>.van-tabs--line >>>.van-tabs__wrap{*/
    /*background-color: #fa3534 !important;*/
    /*}*/
</style>